<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" />
    <meta name="Keywords" content="" />
    <meta name="Description" content="" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta content="telephone=no" name="format-detection" />
    <meta content="email=no" name="format-detection" />
    <title>抛物线</title>
</head>

<body>
    <canvas></canvas>
    <script>
   (function(){
     var W=innerWidth,H=innerHeight;
     var cvs=document.querySelector("canvas"),
       ctx=cvs.getContext("2d"),
       isCast=false;

       cvs.width=W;
       cvs.height=H;  
       
        function Parabola(x0,y0,x1,y1,vx,a){
          var x=x1-x0,y=y1-y0;
          this.x0=x0;
          this.y0=y0;
          this.x1=x1;
          this.y1=y1;
          this.a=a||0.002;
          this.b=(y-this.a*x*x)/x;
          this._x=0;
          this.vx=(((x1-x0)>>31)*2+1)*vx;
          this.radius=5;
       }

       Parabola.prototype.cast=function(ctx){
         var x=(this._x+=this.vx),
          y=this.a*x*x+this.b*x,
          isArrived=Math.abs(x+this.x0-this.x1)<Math.abs(this.vx);
         ctx.beginPath();
         isArrived?ctx.arc(this.x1,this.y1,this.radius,0,Math.PI*2,true):ctx.arc(x+this.x0,y+this.y0,this.radius,0,Math.PI*2,true);
         ctx.closePath();
         ctx.stroke();
         
         return !isArrived;
       };

       document.addEventListener("click",function(){
         if(isCast)return;
          var x0=Math.random()*W,
              y0=Math.random()*H,
              x1=Math.random()*W,
              y1=Math.random()*H,
              radius=5,
              parabola=new Parabola(x0,y0,x1,y1,5);

              isCast=true;
               
             ctx.fillStyle="red";
             ctx.beginPath();
             ctx.arc(x0,y0,radius,0,Math.PI*2,true);
             ctx.closePath();
             ctx.fill();

             ctx.fillStyle="blue";
             ctx.beginPath();
             ctx.arc(x1,y1,radius,0,Math.PI*2,true);
             ctx.closePath();
             ctx.fill();


             function render(){
               if(parabola.cast(ctx))
               {
                 requestAnimationFrame(render);
               }
               else
               {
                 isCast=false;
               }
             }

             render();
         },false);

   })();
   </script>
</body>

</html>